import { Toast } from 'antd-mobile';
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import style from './login.module.scss'
import axios from 'axios'
class signIn extends Component {
    state = {
        istab: true,
        user: '',
        pass: '',
        code: 'fuck497', // 随机验证码
        userCode: '',
        isSend:false,
        num:60 // 用来倒计时
    }
    // 用户名
    userChange = (e) => {
        this.setState({ user: e.target.value })
    }
    // 密码
    passChange = (e) => {
        this.setState({ pass: e.target.value })
    }
    // 验证码
    codeChange = (e) => {
        this.setState({ userCode: e.target.value })
    }
    // tab
    tab = () => {
        this.setState({ istab: true })
    }
    tabTwo = () => {
        this.setState({ istab: false })
    }
    // 随机验证码
    codeRan = () => {
        let str = 'qwertyuiopasdfghjklzxcvbnm1234567890'
        let newStr = ''
        for (var i = 0; i < 7; i++) {
            var ran = Math.floor(Math.random() * (str.length - 1) + 1)
            newStr += str[ran]
        }
        this.setState({ code: newStr })
    }
    // 登录
    login = () => {

        if (this.state.user === '' || this.state.pass === '' || this.state.userCode === '') {
            Toast.info('输入内容不能为空', 1)
        } else {
            if (this.state.code !== this.state.userCode) {
                Toast.info('验证码输入错误', 1)
            } else {
                // 与后端匹配账号
                axios.post('http://s.linweiqin.com/api/s/loginCheck', { username: this.state.user, password: this.state.pass }).then(res => {
                    console.log(res.data)
                    if (res.data.status === 0) {
                        // 把token存储起来
                        let tokenArr = { user: this.state.user, token: res.data.wdata.oauth_token, time: res.data.wdata.oauth_expire_time, name: this.state.user }
                        localStorage.setItem('token', JSON.stringify(tokenArr))
                        setTimeout(()=>{
                            this.props.history.push('/my')
                        },1000)
                    }
                    Toast.info(res.data.msg, 1)
                })
            }
        }
    }
    // 发送验证码
    sendCode=()=>{
        this.setState({isSend:true})
        let num = this.state.num
        let time =  setInterval(() => {
            num--
            this.setState({num:num+'秒后重新发送'})
            if(num < 0){
                clearInterval(time)
                this.setState({isSend:false})
            }
        }, 1000);
    }
    render() {
        return (
            <div className={style.wrap}>
                {/* 脑袋 */}
                <div className={style.header}>
                    <span onClick={()=>{this.props.history.push('/my')}}>{'<'}</span>
                    <h2>用户登录</h2>
                    <b></b>
                </div>
                {/* tab */}
                <div className={style.tab}>
                    <span className={this.state.istab ? style.active : ''} onClick={this.tab}>账号登录</span>
                    <span className={!this.state.istab ? style.active : ''} onClick={this.tabTwo}>手机动态码登录</span>
                </div>
                {/* 内容 */}
                <div className={style.main}>
                    {
                        this.state.istab ?
                            <div>
                                <input type="text" placeholder='用户名/邮箱/手机号' value={this.user} onChange={this.userChange} /><br />
                                <input type="text" placeholder='密码' value={this.pass} onChange={this.passChange} /><br />
                                <section><span><del>{this.state.code}</del></span><em onClick={this.codeRan}>换一张</em></section>
                                <input type="text" placeholder='请输入验证码' value={this.state.userCode} onChange={this.codeChange} />
                            </div> :
                            <div className={style.mobileLogin}>
                                <input type="text" placeholder='用户名/邮箱/手机号' value={this.user} onChange={this.userChange} /><br />
                                <input type="text" placeholder='请输入校验码' value={this.state.userCode} onChange={this.codeChange} />
                    <section><strong></strong><em className={style.code} onClick={this.sendCode}>{this.state.isSend?this.state.num:'发送验证码'}</em></section>

                                <section><span><del>{this.state.code}</del></span><em onClick={this.codeRan}>换一张</em></section>
                                <input type="text" placeholder='请输入验证码' value={this.state.userCode} onChange={this.codeChange} />
                            </div>
                    }

                    <p onClick={this.login}>立即登录</p>
                    <h3>
                        <b onClick={()=>{this.props.history.push('/sign')}}>免费注册</b>
                        <i>找回密码</i>
                    </h3>
                </div>
            </div>
        );
    }
}

export default withRouter(signIn);